<template>
	<z-paging ref="paging" bgColor="#F5F6FA" class="content" v-model="dataList" @query="queryList">
		<template #top>
			<view class="top-box" style="background-color: #fff;">
				<view class="box ">
					<up-search :show-action="true" v-model="keyword" @blur="onSearch" bgColor="#F7F8FA" placeholder="关键词搜索" actionText="搜索" :animation="true"></up-search>
					<up-tabs :scrollable="false" 
						:activeStyle="{
							color:'#F5493D',
							fontWeight:'Bold',
							fontSize:'30rpx'
						}"
						:inactiveStyle="{
							color:'#141311',
							fontSize:'30rpx'
						}"
						lineWidth="60rpx"
						lineHeight="6rpx"
						lineColor="#F5493D"
						@change="onTab"
						:list="tab"></up-tabs>
				</view>
			</view>
			
		</template>
		<view class="box list-box">
			<view class="item" v-for="(item,index) in dataList" @click="goDetails(item.id)">
				<view class="top">
					ID：{{type==2?item.o_id:item.id}}
					
					<view class="status" 
					 :class='{
						 on:item.crack_status==1||item.crack_status==2,
						 off:item.crack_status==3
					 }'
					 v-if="item.crack_status==0">
						{{item.crack_status_text}}
					</view>
				</view>
				<view class="title">
					{{item.subject_title}}
				</view>
				<view class="info">
					<view class="it">
						<view class="image">
							<image :src="item.product_image" mode="aspectFill"></image>
							<image class="icon" :src="`${$imgurl}/static/icon-wen.png`" mode=""></image>
						</view>
						<view class="text">
							<view class="h1">
								{{item.product_name}}
							</view>
							<view class="money">
								<view class="em">￥</view>{{item.product_price}}
							</view>
						</view>
					</view>
				</view>
				<view class="data">
					<view class="left">
						已参与：<view class="em">{{item.join_list_num}}人</view>
					</view>
					<view class="right">
						已破解：<view class="em">{{item.crack_list_num}}人</view>
					</view>
				</view>
				<view class="time" v-if="type==1">
					<view class="left" v-if="!item.my_is_crack">
						结束倒计时：
						<up-count-down  v-if="item._end_time-Date.now()/1000>0" :time="(item._end_time-Date.now()/1000)*1000" format="HH:mm:ss"></up-count-down>
						<view v-else style="color:#838A99">已结束</view>
					</view>
					<view class="left">
						<view v-if="item.my_crack_info.status==0">
							等待发起者确认中...
						</view>
						<view  v-else-if="item.my_crack_info.status==2">
							已驳回
						</view>
					</view>
					<view  class="btn" v-if="!item.my_is_crack">
						继续破解
					</view>
					<view class="btn on" @click.stop="onConfirm(item.id)" v-else-if="item.my_crack_info.status==1">
						确认地址
					</view>
					<view  class="btn" v-else>
						查看详情
					</view>
					
				</view>
				<view class="time" v-else>
					<view class="left" >
						结束倒计时：
						<up-count-down  v-if="item._end_time-Date.now()/1000>0" :time="(item._end_time-Date.now()/1000)*1000" format="HH:mm:ss"></up-count-down>
						<view v-else style="color:#838A99">已结束</view>
					</view>
					<view  class="btn">
						查看详情
					</view>
					
				</view>
			</view>
		</view>
		
	</z-paging>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import {orderForOtherGiftListApi,orderForMyLogGiftListApi} from '/api/gift.js'
	const paging=ref(null)
	const tab_i=ref(0)
	const keyword=ref('')
	const tab=ref([
		{
			name:'全部',
			id:''
		},
		{
			name:'未破解',
			id:0
		},
		{
			name:'已破解',
			id:1
		},
		{
			name:'已失效',
			id:3
		}
	])
	const dataList=ref([]) 
	const onTab=(e)=>{
		console.log(e)
		tab_i.value=e.index
		paging.value.reload()
	}
	const type=ref(1)
	onLoad((obj)=>{
		type.value=obj.type==1?1:2
		uni.setNavigationBarTitle({
			title:obj.type==1?'送自己订单':'送别人订单'
		})
	})
	const onSearch=()=>{
		paging.value.reload()
	}
	const queryList=async (pageNo, pageSize)=>{
		//请求接口数据
		let res='';
		if(type.value==1){//送自己的
			res=await orderForMyLogGiftListApi({
				crack_status:tab.value[tab_i.value].id,
				keyword:keyword.value,
				limit:pageSize,
				page:pageNo
			})
		}else{//送别人的
			res=await orderForOtherGiftListApi({
				crack_status:tab.value[tab_i.value].id,
				keyword:keyword.value,
				limit:pageSize,
				page:pageNo
			})
		}
		
		paging.value.complete(res.data.list);
	}
	const onConfirm=(id)=>{
		uni.navigateTo({
			url:'./confirm?id='+id
		})
	}
	const goDetails=(id)=>{
		if(type.value==1){
			uni.navigateTo({
				url:'../details?id='+id
			})
		}else{
			uni.navigateTo({
				url:'./details?id='+id
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	.list-box{
		
		
		.item{
			background-color: #fff;
			padding:0 24rpx;
			margin-top:20rpx;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color:#9A9A9A;
				font-size:26rpx;
				padding:20rpx 0 16rpx 0;
				border-bottom: 1rpx solid #EDEDED;
				.status{
					padding:0 16rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: bold;
					line-height: 48rpx;
					background-color: #FFF2F0;
					color:#FF4A40;
					&.on{
						background-color: #EFF5FE;
						color:#199FFE;
					}
					&.off{
						background-color: #F5F6FA;
						color:#838A99;
					}
				}
			}
			.title{
				font-weight: bold;
				font-size: 32rpx;
				margin-top:20rpx;
			}
			.info{
				margin-top:20rpx;
				
				background-color: #F7F8FA;
				.it{
					display: flex;
					align-items: center;
					padding:20rpx 0;
					.image{
						width:120rpx;height:120rpx;
						border-radius: 12rpx;
						overflow: hidden;
						position: relative;
						image{
							width:100%;height:100%;display: block;
						}
						.icon{
							position: absolute;top:0;left:0;
							width:32rpx;height:32rpx;
						}
					}
					.text{
						flex:1;
						width:400rpx;
						margin-left:20rpx;line-height: 1;
						.h1{
							font-weight: bold;
							font-size: 28rpx;
							color:#838A99;
							white-space: nowrap; /* 防止文本换行 */
							overflow: hidden; /* 隐藏溢出的文本 */
							text-overflow: ellipsis; /* 显示省略号 */
						}
						.money{
							display: flex;
							font-weight: bold;
							color:#838A99;
							font-size: 32rpx;
							align-items: flex-end;
							margin-top:28rpx;
							.em{
								font-size:24rpx;margin-left:6rpx;
							}
						}
						
					}
				}
				
				
			}
			.data{
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #EDEDED;
				align-items: center;
				height:88rpx;
				.left{
					color:#838A99;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					.em{
						color:#141311;
					}
				}
				.right{
					color:#838A99;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					.em{
						color:#FF401A;
					}
				}
			}
			.time{
				display: flex;justify-content: space-between;
				padding:20rpx 0;
				align-items: center;
				.left{
					display: flex;
					font-size: 28rpx;
					::v-deep{
						.u-count-down__text{
							color:#F5493D;line-height: 1;font-size:24rpx;font-weight: bold;
						}
					}
				}
				.btn{
					color:#838A99;
					border-radius: 40rpx;
					background-color: #F5F6FA;
					padding:0 24rpx;line-height: 68rpx;
					font-size: 28rpx;
					&.on{
						background-color: #F5493D;
						color:#fff;
					}
				}
			}
		}
	}
</style>
